﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>机构用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-input-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" style="width:500px" placeholder="请输入姓名、账号、身份证号码、电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <div class="layui-form-item">
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search" id="btnSearch">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <table id="UserInfoTable" lay-filter="UserInfoTable"></table>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element'], {
        data: {
            $layui: null,
            right: null,
            tableuser: null,
        },
        pageload: function (right) {
            this.data.right = right;
            this.data.tableuser= this.loadtableuser();
            this.initevent();
        },
        initevent() {
            var self = this;
            var form = layui.form;
            var table = layui.table;
            form.on("submit(LAY-user-front-search)", function (data) {
                self.data.tableuser.reload({
                    where: {
                        username: data.field.username
                    },
                    page: {
                        curr: 1
                    }
                });
            });
            //添加按钮的点击事件
            table.on('toolbar(UserInfoTable)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        //adduser();
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(UserInfoTable)', function (obj) {
                var data = obj.data;//当前行数据
                if (obj.event === "edit") {
                    self.alteruser(data);
                }
                //启用、停用
                if (obj.event === "disable" || obj.event === "enable") {
                    self.stopuser(data);
                }
                //重置密码
                if (obj.event === "reset") {
                    self.resetuserpass(data);
                }
            });
        },
        loadtableuser() {
            var table = layui.table;
            return table.render({
                elem: '#UserInfoTable',
                headers: lobsterlayui.GetHeaderData(),
                where: {
                    username: ''
                },
                height: 'full-120',
                cellMinWidth: 80,
                //size: 'sm',
                toolbar: '#toolbar',
                url: "/admin/v1/user/GetUserData", //数据接口
                page: true,
                //even: true,
                cols: [[
                    { width: "100", field: 'UserCode', title: '用户帐号', fixed: 'left' },
                    { width: "120", field: 'Name', title: '用户名称', sort: true },
                    { width: "60", field: 'StrSex', title: '性别' },
                    { width: "150", field: 'IDNumber', title: '身份证号码', templet: '#IDNumberTpl' },
                    { width: "150", field: 'Telephone', title: '电话', templet: '#TelephoneTpl' },
                    { width: "100", field: 'StrAdmin', title: '用户级别' },
                    { width: "180", field: 'RegTime', title: '注册时间', align: 'center' },
                    { width: "100", field: 'StrDelFlag', title: '状态标识', sort: true, align: 'center', templet: '#flagTpl' },
                    { width: "250", title: '操作', fixed: 'right', align: 'center', toolbar: '#useroption' }   //操作script的id                  
                ]],
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.dt
                    }
                }
            });
        },
        alteruser(data) {
            var self = this;
            var form = layui.form;
            layer.open({
                type: 1
                , title: '编辑用户信息'
                , content: $('#adduser').html()
                , area: ["100%", "100%"]
                , btn: ['保存', '取消']
                , success: function (layero, index) {
                    form.val('form-user', data);
                }
                , btn2: function (index, layero) {
                    $("#LAY-user-form-reset").trigger('click');
                }
                , cancel: function () {
                    $("#LAY-user-form-reset").trigger('click');
                }
                , yes: function (index, layero) {
                    
                    var submit = $('#LAY-user-front-submit');
                    //监听提交
                    form.on('submit(LAY-user-front-submit)', function (data) {
                        self.saveuser(data, index);//保存用户
                    });
                    submit.trigger('click');
                }
            });
        },
        saveuser(data, index) {
            var self = this;
            var field = data.field; //获取提交的字段
            var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
            console.log(field);

            lobsterlayui.POST('/admin/v1/user/SaveUserData', field).then(data => {
                layer.msg("保存成功");
                layer.close(index);
                self.data.tableuser.reload();
            })
        },
        stopuser(data) {
            var self = this;
            // 启用停用用户
            var confirm_msg = "";
            var status = 0;
            if (data.DelFlag == 0) {
                confirm_msg = "确认停用么?";
                status = 1;
            }
            else {
                confirm_msg = "确认启用么?";
                status = 0;
            }

            layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                function (index) {
                    lobsterlayui.GET('/admin/v1/user/stopuser', { userId: data.UserID, delFlag: status }).then(data => {
                        layer.close(index);
                        self.data.tableuser.reload();
                    }) 
                });
        },
        resetuserpass(data) {
            var self = this;
            layer.confirm('确定重置密码么？', { icon: 3, title: "提示" },
                function (index) {

                    lobsterlayui.GET('/admin/v1/user/ResetPass', { userId: data.UserID, usercode: data.UserCode }).then(data => {
                        layer.msg("重置成功");
                        layer.close(index); //关闭弹层
                        self.data.tableuser.reload();
                    })

                });
        }
    });

    /**
    * 关键信息隐藏
    * param str 字符串
    * param frontLen 字符串前面保留位数
    * param endLen 字符串后面保留位数
    * returns {string}
    */
    function hideCode(str, frontLen, endLen) {
        var len = str.length - frontLen - endLen;
        var xing = '';
        for (var i = 0; i < len; i++) {
            xing += '*';
        }
        return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
</script>

<script id="toolbar" type="text/html">
    <div class="layui-btn-group">
        <!--<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>-->
    </div>
</script>

<script type="text/html" id="flagTpl">
    {{#  if(d.StrDelFlag == '已停用'){ }}
    <span style="color:red;">{{ d.StrDelFlag }}</span>
    {{#  } else { }}
    {{ d.StrDelFlag }}
    {{#  } }}
</script>
<script type="text/html" id="IDNumberTpl">
    {{ hideCode(d.IDNumber,4,4) }}
</script>
<script type="text/html" id="TelephoneTpl">
    {{ hideCode(d.Telephone,3,2) }}
</script>
<script type="text/html" id="useroption">

    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    {{#  if(d.StrDelFlag == '已启用'){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-extend-stop"></i>停用</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs" lay-event="reset"><i class="layui-icon layui-icon-refresh"></i>重置密码</a>
</script>

<script type="text/html" id="adduser">
    <div class="layui-fluid box">
        <div class="layui-form" lay-filter="form-user">
            <div class="layui-card">
                <div class="layui-card-body box" id="workdetail">
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>用户帐号</label>
                        <div class="layui-input-block">
                            <input type="text" id="usercode" name="UserCode" required lay-verify="required" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>身份证号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="IDNumber" name="IDNumber" lay-verify="required|chkIDNumber" autocomplete="off" class="layui-input" disabled>
                        </div>
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>手机号码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="Telephone" name="Telephone" lay-verify="required|chkphone" autocomplete="off" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>姓名</label>
                        <div class="layui-input-block">
                            <input type="text" id="username" name="Name" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                        <div class="layui-form-item active">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select id="sex" name="Sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Age" lay-verify="Age" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item active">
                            <label class="layui-form-label">通信邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" id="email" name="Email" lay-verify="checkemail" autocomplete="off" class="layui-input">
                            </div>

                        </div>
                        <div class="layui-form-item active">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="Address" lay-verify="Address" maxlength="100" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item active">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" name="Memo" maxlength="350" placeholder="请输入内容"></textarea>
                            </div>
                        </div>


                        <div class="layui-form-item layui-hide">
                            <input type="text" name="UserID" id="userID" value="0">
                        </div>

                        <div class="layui-form-item layui-hide">
                            <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="保存">
                            <input type="button" lay-cancel lay-filter="LAY-user-front-cancel" id="LAY-user-front-cancel" value="取消">
                            <input type="reset" id="LAY-user-form-reset" value="重置">
                        </div>
                    </div>
                </div>
        </div>
    </div>
</script>